<#assign ctx="${rc.contextPath}">

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>we are family</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/show/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/show/css/default.css">
    <link rel="stylesheet" href="${ctx}/static/show/css/chromagallery.min.css">
    <style type="text/css">
        body, html {
            height: 100%;
        }

        .content {
            width: 100%;
            height: 100%;
            margin: 10px auto;
        }

        @media screen and (min-width: 980px) /* Desktop */ {
            .content {
                width: 70%;
            }
        }

        .mygallery {
            margin: 25px 0;
        }
    </style>

</head>
<body>
<div class="content">
    <div class="chroma-gallery mygallery">
    <#list imgList as img>
        <img src="${ctx}/static/show/images/thumbs/${img.imgName!}"
             data-largesrc="${ctx}/static/show/images/${img.imgName!}" alt="we are family"/>
    </#list>
    </div>
</div>

<script type="text/javascript" src="${ctx}/static/show/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${ctx}/static/show/js/imagesloaded.min.js"></script>
<script type="text/javascript" src="${ctx}/static/show/js/chromagallery.min.js"></script>
<script type="text/javascript" src="${ctx}/static/show/js/masonry.min.js"></script>
<script type="text/javascript" src="${ctx}/static/show/js/modernizr-chrg.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".mygallery").chromaGallery
        ({
            color:'#000',
            gridMargin:15,
            maxColumns:5,
            dof:true,
            screenOpacity:0.8
        });
    });
</script>
</body>
</html>